<template>
	<!-- <div> -->
		<div id="tags-wrap" v-if="showTags">
			<ul>
				<li class="tags-li" v-for="(item,index) in tagsList" :class="{'active': isActive(item.path)}" :key="index">
					<router-link :to="item.path" class="tags-li-title">
						{{item.title}}
					</router-link>
					<span class="tags-li-icon" @click="closeTags(index)"><i class="el-icon-close"></i></span>
				</li>
			</ul>
			<div class="tags-close-box">
				<el-dropdown @command="handleTags">
					<el-button size="mini" type="primary">
						标签选项<i class="el-icon-arrow-down el-icon--right"></i>
					</el-button>
					<el-dropdown-menu size="small" slot="dropdown">
						<el-dropdown-item command="other">关闭其他</el-dropdown-item>
						<el-dropdown-item command="all">关闭所有</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>

			</div>
		</div>
	<!-- </div> -->
</template>

<script>
	import bus from './bus';
	import {
		reactive,
		ref,
		onMounted,
		computed,
		watch
	} from "@vue/composition-api";
	export default {
		name: "tags",
		setup(props, {
			refs,
			root
		}) {
			//data
			let listStr = reactive(root.$store.state.tagsList);
			//method
			let isActive = (path) => {
				return path === root.$route.fullPath;
			};
			// 关闭单个标签
			let closeTags = (index) => {
				// console.log(listStr)
				// console.log(root.$store.state.tagsList)
				const delItem = listStr.splice(index, 1)[0];
				const item = listStr[index] ? listStr[index] : listStr[index - 1];
				if (item) {
					delItem.path === root.$route.fullPath && root.$router.push(item.path);

				} else {

					root.$router.push({
						path: "/"
					});
				}
			};
			// 关闭全部标签
			let closeAll = () => {
				listStr = reactive([])
				// 	root.$store.commit('setTagsList',[{
				// 	title: "首页",
				// 	path: "/homePage",
				// 	// name: route.matched[1].components.default.name
				// 	name:"homePage"
				// }])
				setTimeout(() => {
					root.$router.push({
						path: "/"
					});
				}, 100)






			};
			// 关闭其他标签
			let closeOther = () => {
				const curItem = listStr.filter(item => {
					return item.path === root.$route.fullPath;
				})

				root.$store.commit('setTagsList', curItem);
			};
			// 设置标签
			let setTags = (route) => {
				const isExist = listStr.some(item => {
					return item.path === route.fullPath;
				})
				if (!isExist) {
					//如果集合大于8则将前面的替换
					if (listStr.length >= 8) {
						listStr.shift();
					}
					listStr.push({
						title: route.meta.title,
						path: route.fullPath,
						// name: route.matched[1].components.default.name
						name: route.matched[1].name
					})
					root.$store.commit('setTagsList', listStr)
				}

			};
			let handleTags = (command) => {
				command === 'other' ? closeOther() : closeAll();
			};
			//onMounted
			onMounted(() => {
				setTags(root.$route);
			});
			//computed
			let tagsList = computed(() => root.$store.state.tagsList);
			let showTags = computed(() => {
				return ref(listStr.length > 0);
			});

			//watch
			watch(
				() => root.$route, (newValue, oldValue) => {
					setTags(newValue);
				});
			return {
				tagsList,
				listStr,

				showTags,
				isActive,
				closeTags,
				closeAll,
				closeOther,
				setTags,
				handleTags
			}
		}
	}
</script>

<style lang="scss" scoped>
	#tags-wrap {
		position: fixed;
		top: $headHeight;
		left: $navWidth;
		right: 0px;
		background-color: #fff;
		height: 32px;
		border-top: 3px solid #f7f7f7;
		@include webkit(transition,all .3s ease 0s);
		/* box-sizing: border-box; */

		/*box-shadow: 0 5px 10px #ddd;*/
	}

	.open {
		#tags-wrap {
			left: $navWidth;
		}
	}

	.close {
		#tags-wrap {
			left: $navWidth_1;
		}
	}

	#tags-wrap ul {
		box-sizing: border-box;
		float: left;
	}

	.tags-li {
		float: left;
		margin: 3px 5px 2px 3px;
		border-radius: 3px;
		font-size: 12px;
		overflow: hidden;
		cursor: pointer;
		height: 23px;
		line-height: 23px;
		border: 1px solid #e9eaec;
		background: #fff;
		padding: 0 5px 0 12px;
		vertical-align: middle;
		color: #666 !important;
		-webkit-transition: all .3s ease-in;
		-moz-transition: all .3s ease-in;
		transition: all .3s ease-in;
	}

	.tags-li:not(.active):hover {
		background: #f8f8f8;
	}



	.tags-li-title {
		float: left;
		max-width: 80px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		margin-right: 5px;
		color: #666 !important;
	}

	.tags-li.active {

		border: 1px solid rgba(64, 158, 255, 0.8);
		background-color: rgba(64, 158, 255, 0.8);
	}

	.tags-li.active .tags-li-title {
		color: rgb(255, 255, 255) !important;
	}

	.tags-close-box {
		position: absolute;
		right: 0;
		top: 0;
		box-sizing: border-box;
		padding-top: 1px;
		text-align: center;
		width: 110px;
		height: 30px;
		background: #fff;
		box-shadow: -3px 0 15px 3px rgba(0, 0, 0, .1);
		z-index: 10;
	}
</style>
